<template>
<!-- 这是全局组件...页头 -->
<div class="header">
    <!-- 添加按钮 -->
  <van-icon :name="icon" style="position:fixed;top:28px;left:15px;"  @click="alertMenu"/>
  <!-- 发布作品弹出框 -->
  <van-action-sheet v-model="show" title="爱分享的人是厨房的天使" duration="0.2">
    <!-- 上传按钮 -->
    <div style="display:flex; margin-top:10%" class="publish">
      <div style="margin:0 25%">
        <router-link to="/uploader">
          <van-button round icon="photo-o" color="mediumturquoise" style="font-size:30px;width:60px;height:60px"></van-button>
        </router-link>
        <p>发作品</p>
      </div>
      <div >
        <van-button round icon="newspaper-o" color="coral" style="font-size:30px;width:60px;height:60px"></van-button>
        <p>传菜谱</p>
      </div>
    </div>
  </van-action-sheet>
  <!-- 搜索框 -->
  <form action="/"> 
    <van-search 
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
  </form>

  <!-- 顶部导航栏 -->
  <van-tabs v-model="active_tab"  class="index-tabs">
    <van-tab title="关注"></van-tab>
    <van-tab title="推荐"></van-tab>
    <van-tab title="分类"></van-tab>
  </van-tabs>

  <!-- 底部导航 -->
  <van-tabbar v-model="active_bar">
    <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="collection" icon="star-o">收藏</van-tabbar-item>
    <van-tabbar-item name="me" icon="friends-o">我的</van-tabbar-item>
  </van-tabbar>
</div>
</template>
<script>
export default {
  data() {
    return {
      active_tab: 2,
      value:'',
      active_bar:'home',
      show:false,
      icon:"plus"
    };
  },
  methods: {
    onSearch(val) {
      // Toast(val);
      console.log(val)
    },
    //发布作品弹出框
    alertMenu(){
      this.show=true;
    },

  },                                      
  watch:{
    active_tab(){
      if(this.active_tab==0){
        // this.$router.push('/');
      }else if(this.active_tab==1){
        this.$router.push('/index');
      }else{
        this.$router.push('/sort');
      }
    },
    show(){
      if(this.show==true){
        this.icon="cross"
      }else{
        this.icon="plus"
      }
    }

  },

}
</script>

<style scoped>
.van-search__content {
  border-radius: 8px;
  margin: 0 2%;
}
.van-search__action{
  padding-left: 0;
}
.van-search{
  width: 90%;
  margin-left: 5%;
}
.header{
  position: fixed;
  top: 10px;
  right: 0;
  left: 0;
}
.index-tabs {
  width: 70%;
  margin-left: 15%;
}
/* 关注，推荐，分类  字体颜色 */
.index-tabs>>>.van-tab{
  color: rgb(175, 173, 173);
}
.index-tabs>>> .van-tab--active{
  color: #000 ;
}
.index-tabs>>> .van-tabs__line{
  width: 20px;
}



</style>